<template>
  <!-- 无数据时显示暂无项目内容 -->
  <div class="none" v-if="show == false && searchValue.length == 0">暂无项目内容</div>
  <div class="contentlist" v-if="show || searchValue.length > 0">
    <!-- 头部 -->
    <div class="top" v-if="show || searchValue.length > 0">
      <a-row>
        <a-col :span="8" class="left color_6f6d9d">
          <div>
            <button class="batchDelete" @click="showCheckbox = true" v-if="!showCheckbox">选择</button>
          </div>
          <div v-if="showCheckbox" class="deleteAllFunction">
            <button @click="showCheckbox = false" class="cancelDeletion">取消选择</button>
            <button class="selectAll" @click="handleCheckAllChange">
              <i class="appIcon-iconfont appIcon-duoxuan check-icon" v-if="mainStore.checkAlls"></i>
              <i class="appIcon-iconfont appIcon-weixuan check-icon" v-if="!mainStore.checkAlls"></i>
              全选
              <!-- <a-checkbox v-model:checked="checkAll" @change="onCheckAllChange" class="selectAllTop">全选</a-checkbox> -->
            </button>
            <div class="delete" @click="handledelete" v-if="showCheckbox && Array.from(checkboxValue).length > 0">
              <dd>
                <i class="appIcon-iconfont appIcon-shanchu"></i>
              </dd>删除
            </div>
          </div>
        </a-col>
        <a-col :span="8" class="center color_413a50">
          <div>共{{ dataList.length }}个项目</div>
        </a-col>
        <a-col :span="8" class="right color_6f6d9d">
          <!-- 搜索 -->
          <div class="sousuoxin">
            <!-- <input type="text" name id /> -->
            <a-input autocomplete='off' id="sousuoinp" :class="sousuo ? 'inpxin' : ''" v-model:value="searchValue"
              placeholder="搜索项目名称" />
            <div class="searchclass" @click="sousuoFn"
              :style="{ background: sousuo ? '#686CE8' : '#ffffff', color: sousuo ? '#ffffff' : '' }">
              <i class="appIcon-iconfont appIcon-sousuo"></i>
            </div>
          </div>
          <div class="list_chart" @click="changetype(1)" v-if="type == 1">
            <i class="appIcon-iconfont appIcon-tubiaozhanshi"></i>
          </div>
          <div class="list_chart" @click="changetype(2)" v-else>
            <i class="appIcon-iconfont appIcon-liebiaozhanshi"></i>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 图表 -->
    <div class="classlist" v-if="type == 1 && show">
      <ul>
        <!-- <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;"> -->
        <li v-for="(item, index) in dataList" :key="index"
          :class="`animate__animated animate__fadeInUp animate__delay-0${index % 5}s`" :style="`height:${height}px`">
          <div class="box conentbox" :style="`background:${item.params.bgColor}`">
            <img :src="item.imageUrl" v-if="item.imageUrl" />
            <!-- <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox> -->
            <div class="checkbox groupbox" @click="checkboxChange(item.hhxsChartId)" v-if="showCheckbox">
              <i class="appIcon-iconfont appIcon-weixuan check-icon" v-if="!checkboxValue.has(item.hhxsChartId)"></i>
              <i class="appIcon-iconfont appIcon-duoxuan check-icon" v-if="checkboxValue.has(item.hhxsChartId)"></i>
            </div>
            <div class="view">
              <dd @click="toDetail(item.hhxsChartId, '1')"><i class="appIcon-iconfont appIcon-anliyulan"></i></dd>
            </div>
            <div class="edit">
              <a-popover trigger="hover" overlayClassName="popverclass">
                <!-- v-model:visible="morevisible" -->
                <dd>
                  <i class="appIcon-iconfont appIcon-more"></i>
                </dd>
                <template #content>
                  <div class="tips">
                    <a-popover placement="leftTop" trigger="click" overlayClassName="shareLinks"
                      @visibleChange="closeFn">
                      <template #content>
                        <h2>分享链接</h2>
                        <div class="flex">
                          <a-input disabled="false" v-model:value="fareurl" size="large" width="220px" />
                          <dd class="linkCopy" @click="copyUrl">
                            <i v-if="copyed" class="appIcon-iconfont appIcon-fuzhi"></i>
                            <i v-else class="appIcon-iconfont appIcon-fuzhichenggong"></i>
                          </dd>
                        </div>
                      </template>
                      <dd @click="fare(item)">分享链接</dd>
                    </a-popover>
                    <!-- <dd>创建副本</dd> -->
                    <!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                        <template #content>
                          <div class="downloadFlex">
                            <dd>下载(PPT)</dd>
                            <dd>下载(JPG)</dd>
                            <dd>下载(PDF)</dd>
                          </div>
                        </template>
                        <dd>移动到</dd>
                      </a-popover> -->
                    <!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                      <template #content>
                        <div class="downloadFlex">
                          <dd>下载(PPT)</dd>
                          <dd>下载(JPG)</dd>
                          <dd>下载(PDF)</dd>
                        </div>
                      </template>
                      <dd>下载为</dd>
                    </a-popover> -->
                    <dd @click="textFocus(index)">重命名</dd>
                    <dd @click="deleteitem(item)">删除文件</dd>
                  </div>
                </template>
              </a-popover>
            </div>
            <div class="mask" @click.self="toDetail(item.hhxsChartId, '0')"></div>
          </div>
          <dl class="name_inp">
            <a-input v-if="npmeInp == 'inpname_' + index" :id="'inpname_' + index" class="name_inp_inp"
              v-model:value="item.title" @blur="editTitle(item)" @focus="focusTitle(item)" maxlength="10" />
            <span v-else @click="textFocus(index)" class="inp_span">{{ item.title }}</span>
            <i v-if="npmeInp == null" class="appIcon-iconfont appIcon-bianji inp_icon" @click="textFocus(index)"></i>
          </dl>
        </li>
        <!-- </a-checkbox-group> -->
      </ul>
    </div>
    <!-- 列表 -->
    <div class="classlist2" v-if="type == 2 && show">
      <ul>
        <!-- <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;"> -->
        <li v-for="(item, index) in dataList" :key="index">
          <a-col :span="8">
            <div class="box">
              <!-- <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox> -->
              <div class="checkbox groupbox" @click="checkboxChange(item.hhxsChartId)" v-if="showCheckbox">
                <i class="appIcon-iconfont appIcon-weixuan check-icon" v-if="!checkboxValue.has(item.hhxsChartId)"></i>
                <i class="appIcon-iconfont appIcon-duoxuan check-icon" v-if="checkboxValue.has(item.hhxsChartId)"></i>
              </div>
              <img :src="item.imageUrl" v-if="item.imageUrl" @click.stop="toDetail(item.hhxsChartId, '1')" />
              <img src="https://picsum.photos/id/11/10/6" v-else @click.stop="toDetail(item.hhxsChartId, '1')" />
              <!-- <p @click="toDetail(item.hhxsChartId,'0')">{{item.title}}</p> -->
              <dl class="name_inp">
                <a-input v-if="npmeInp == 'inpname_type_' + index" :id="'inpname_type_' + index" class="name_inp_inp"
                  @focus="focusTitle(item)" @blur="editTitle(item)" v-model:value="item.title" maxlength="10" />
                <span v-else @click="textFocus(index)" class="inp_span">{{ item.title }}</span>
                <i v-if="npmeInp == null" class="appIcon-iconfont appIcon-bianji inp_icon color_a8b5d7"
                  @click="textFocus(index)"></i>
              </dl>
            </div>
          </a-col>
          <a-col :span="8" class="center" @click.self="toDetail(item.hhxsChartId, '0')"></a-col>
          <a-col :span="8">
            <div class="list_right">
              <div class="view">
                <dd @click="toDetail(item.hhxsChartId, '1')" class="anliyulanicon color_a8b5d7">
                  <i class="appIcon-iconfont appIcon-anliyulan"></i>
                </dd>
              </div>
              <div class="edit">
                <a-popover overlayClassName="popverclass" trigger="hover" placement="leftTop">
                  <!-- v-model:visible="morevisible" -->
                  <dd class="color_a8b5d7">
                    <i class="appIcon-iconfont appIcon-more"></i>
                  </dd>
                  <template #content>
                    <div class="tips">
                      <a-popover placement="leftTop" trigger="click" overlayClassName="shareLinks"
                        @visibleChange="closeFn">
                        <template #content>
                          <h2>分享链接</h2>
                          <div class="flex">
                            <a-input v-model:value="fareurl" size="large" width="220px" />
                            <dd class="linkCopy" @click="copyUrl">
                              <i v-if="copyed" class="appIcon-iconfont appIcon-fuzhi"></i>
                              <i v-else class="appIcon-iconfont appIcon-fuzhichenggong"></i>
                            </dd>
                          </div>
                        </template>
                        <dd @click="fare(item)">分享链接</dd>
                      </a-popover>
                      <!-- <dd @click="onCopyFile(item)">创建副本</dd> -->

                      <!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                      <template #content>
                        <div class="downloadFlex">
                          <dd>下载(PPT)</dd>
                          <dd>移动弄</dd>
                          <dd>下载(PDF)</dd>
                        </div>
                      </template>
                      <dd>移动到</dd>
                    </a-popover> -->

                      <!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                        <template #content>
                          <div class="downloadFlex">
                            <dd>下载(PPT)</dd>
                            <dd>下载(JPG)</dd>
                            <dd>下载(PDF)</dd>
                          </div>
                        </template>
                        <dd>下载为</dd>
                      </a-popover> -->

                      <dd @click="textFocus(index)">重命名</dd>
                      <dd @click="deleteitem(item)">删除文件</dd>
                    </div>
                  </template>
                </a-popover>
              </div>
            </div>
          </a-col>
        </li>
        <!-- </a-checkbox-group> -->
      </ul>
    </div>
    <!-- 未找到内容 -->
    <div class="inpnone" v-if="searchValue.length > 0 && !show">
      <div class="text">未找到该项目内容</div>
    </div>
  </div>

</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import request from "@/utils/request"
import { copyText, readClipboard } from '@/utils/clipboard'
import { message } from 'ant-design-vue'
import { useMainStore, useSlidesStore } from '@/store'
import { getBoxWidth } from '@/hooks/useGlobalFun'
import { Turkey } from '@icon-park/vue-next'
import { storeToRefs } from 'pinia'

const mainStore = useMainStore()
const { globalEnv } = storeToRefs(mainStore)

export default defineComponent({
  name: 'Contentlist',
  props: ['delsure'],
  setup(props, { emit }) {
    const sousuo = ref<boolean>(false)
    const router = useRouter()
    const copyState = ref('复制')
    const searchValue = ref('')
    const value = ref<string>('')
    const visible = ref<boolean>(false)
    const fareurl = ref<string>('')
    const showCheckbox = ref<boolean>(false)
    const titleEditor = ref<boolean>(false)
    let height = ref(250)
    const type = ref(1)
    const mainStore = useMainStore()
    const copyed = ref<boolean>(true) // 判断是否复制
    const npmeInp = ref<any>(null) // 判断是否点击重命名
    const morevisible = ref<boolean>(false) // 点击按钮后关闭弹出层
    const show = ref<boolean>(true) // 判断有无数据
    const checkAlls = ref(false) // 是否全选
    let checkboxValue = ref(new Set()) //创建新数组存放选择id

    const showModal = () => {
      visible.value = true
    }
    // 点击全选
    const handleCheckAllChange = () => {
      mainStore.$patch({
        checkAlls: !mainStore.checkAlls
      })
    }
    //批量选择
    let checkboxChange = (v: any) => {
      // console.log(v);
      if (checkboxValue.value.has(v)) {
        checkboxValue.value.delete(v)
      } else {
        checkboxValue.value.add(v)
      }
      // console.log(checkboxValue.value)
      // mainStore.$patch({
      //   checkboxValue: checkboxValue.value,
      // });
      // console.log(...toRaw(mainStore.checkboxValue));
      // console.log(mainStore.checkboxValue);
    }
    //全选和取消全选
    watch(
      () => mainStore.checkAlls,
      (newValue, oldValue) => {
        if (newValue) {
          dataList.value.forEach((element: any) => {
            checkboxValue.value.add(element.hhxsChartId)
          })
        } else {
          checkboxValue.value = new Set()
        }
        // mainStore.$patch({
        //   checkboxValue: checkboxValue.value,
        // });
      }
    )
    // 选择和取消选择
    watch(
      () => showCheckbox,
      (newValue, oldValue) => {
        // checkboxValue.value = new Set()
        mainStore.$patch({
          checkAlls: false,
        })
      }
    )
    // 点击搜索事件
    const sousuoFn = (event: any) => {
      sousuo.value = !sousuo.value
      // console.log(event.target)
      if (sousuo.value) {
        // console.log(document.getElementById('sousuoinp'))
        document.getElementById('sousuoinp')?.focus()
      } else {
        searchValue.value = ''
        // console.log(12)
      }
    }

    const handleOk = (e: MouseEvent) => {
      console.log(e)
      visible.value = false
    }
    const groupchange = () => {
      console.log(checkboxValue, 'checkboxValue')
    }
    // 获取分享链接
    const fare = (item: any) => {
      console.log('复制成功')

      visible.value = true
      console.log(item, 'item')

      const url = `${globalEnv.value}/freeeditor/#/freeeditor?wid=${item.hhxsChartId}&screen=1`
      fareurl.value = url
    }
    const copyUrl = () => {
      copyText(fareurl.value).then((res: any) => {
        console.log(fareurl, res)
        copyState.value = '复制成功'
      })
      copyed.value = false
    }
    // 组件隐藏时执行回调函数
    const closeFn = (a: boolean) => {
      if (!a) {
        setTimeout(() => {
          copyed.value = true
        }, 800)
      }
    }
    // 复制副本
    // const onCopyFile = (id: number) => {
    //   let params = {
    //     hhxsProcessonId: id,
    //   };
    //   copyProject(params).then((res: any) => {
    //     console.log("复制成功", res);
    //     getDataList();
    //   });
    // };
    // 点击名字重命名
    const textFocus = (item: number) => {
      if (type.value === 1) {
        npmeInp.value = 'inpname_' + item
        nextTick(() => {
          document.getElementById('inpname_' + item)?.focus()
          morevisible.value = false
        })
      } else {
        npmeInp.value = 'inpname_type_' + item
        nextTick(() => {
          document.getElementById('inpname_type_' + item)?.focus()
          morevisible.value = false
        })
      }
    }
    let dataList: any = ref([])
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: [],
    })
    const onSearch = (searchValue: string) => {
      console.log('use value', searchValue)
      // console.log('or use this.value', value.value)
      // getDataList()
    }
    //搜索--监听事件
    watch(
      () => searchValue.value,
      (newValue, oldValue) => {
        // console.log(newValue)
        getDataList()
      }
    )
    // const onCheckAllChange = (e: any) => {
    //   for (let i = 0; i < dataList.value.length; i++) {
    //     checkboxValue.value.push(dataList.value[i].hhxsChartId)
    //     console.log("添加", dataList.value[i].hhxsChartId)
    //   }
    //   Object.assign(state, {
    //     checkedList: e.target.checked ? checkboxValue : [],
    //     indeterminate: false,
    //   })
    //   // showCheckbox.value = e.target.checked
    // }
    const changetype = (val: number) => {
      val === 1 ? type.value = 2 : type.value = 1
      // console.log(val,type.value)
      // type.value === 2 ? getBoxHeight() : ''
    }
    const getDataList = () => {
      request.post(`/hhxs-ssc/sc/chart/page`,
        {
          title: searchValue.value,
          size: 1000,
          current: 1,
          // sort: true
          // orders: [{ asc: false }]
        }
      ).then((res: any) => {
        // console.log(searchValue.value.length)
        // console.log(res, "数据")
        if (res.data.data.total === 0) {
          show.value = false
        } else {
          show.value = true
          dataList.value = res.data.data.records
        }
      })
    }
    const toDetail = (id: string, screen: string) => {
      router.push({
        path: '/freeeditor',
        query: {
          wid: id,
          screen: screen
        }
      })
    }
    // 批量删除
    const handledelete = () => {
      if (Array.from(checkboxValue.value).length === 0) {
        message.warn('请选择要删除的项目')
      } else {
        mainStore.$patch({
          del: true,
          deltype: 0
        })
      }
      // console.log(checkboxValue.value)
      // if (checkboxValue.value.size === 0) {
      //   message.warn('请选择要删除的项目')
      // } else {
      //   // mainStore.del<>(true)
      //   request.post('/hhxs-ssc/sc/chart/deleteChartBatch', checkboxValue.value).then((res: any) => {
      //     if (res.data.code === 200) {
      //       getDataList()
      //       showCheckbox.value = false
      //       checkboxValue.value = new Set()
      //     }
      //   })
      // }
    }
    // 批量删除监听
    watch(() => mainStore.delmore, val => {
      // console.log(123456789999)
      // console.log(Array.from(checkboxValue.value))
      if (mainStore.delmore) {
        request.post('/hhxs-ssc/sc/chart/deleteChartBatch', Array.from(checkboxValue.value))
          .then((res: any) => {
            if (res.data.code === 200) {
              getDataList()
              showCheckbox.value = false
              checkboxValue.value = new Set()
              mainStore.$patch({
                delmore: false
              })
            }
          })
      }
    })
    // 删除一个
    const deleteitem = (item: any) => {
      // console.log(item)
      mainStore.$patch({
        del: true,
        deloneitem: item.hhxsChartId,
        deltype: 1
      })
    }
    // 监听删除事件-删除一个
    watch(
      () => mainStore.delone,
      val => {
        // console.log('一键通')
        if (mainStore.delone) {
          request.get(`/hhxs-ssc/sc/chart/deleteChart/${mainStore.deloneitem}`)
            .then((res: any) => {
              if (res.data.code === 200) {
                getDataList()
                mainStore.$patch({ delone: false })
              }
            })
        }
      },
    )
    // watch(()=>)
    // 聚焦事件
    const itemTitle = ref<any>('')
    const focusTitle = (item: any) => {
      itemTitle.value = item.title
      // console.log(itemTitle.value)
    }
    // 失焦事件
    const editTitle = (item: any) => {
      // if (!titleEditor.value) {
      //   npmeInp.value = null
      //   return
      // }
      if (item.title === '') {
        message.warn('标题不能为空')
        request.get(`/hhxs-ssc/sc/chart/getChartContent/${item.hhxsChartId}`)
          .then(res => {
            if (res.data.code === 200) {
              let params = res.data.data
              params.title = itemTitle.value
              request.post(`/hhxs-ssc/sc/chart/saveOrUpdate`, params).then(res => {
                if (res.data.code === 200) {
                  // message.success('修改成功!')
                  titleEditor.value = false
                  npmeInp.value = null
                  getDataList()
                }
              })
            }
          })
      } else {
        // console.log(item, "biaoi")
        request.get(`/hhxs-ssc/sc/chart/getChartContent/${item.hhxsChartId}`)
          .then(res => {
            if (res.data.code === 200) {
              let params = res.data.data
              params.title = item.title

              request.post(`/hhxs-ssc/sc/chart/saveOrUpdate`, params).then(res => {
                if (res.data.code === 200) {
                  message.success('修改成功!')
                  titleEditor.value = false
                  npmeInp.value = null
                  getDataList()
                }
              })
            }
          })
      }
      // console.log(item, "biaoi")
    }
    const titleChange = (e: InputEvent) => {
      // console.log(e)
      titleEditor.value = true
    }
    const getBoxHeight = () => {
      const width = (getBoxWidth('.classlist') / 5) - 40
      height.value = (width * 208 / 248) + 43
    }
    watch(
      () => state.checkedList,
      val => {
        state.checkAll = val.length === dataList.value.length
        // console.log(123456999)
      },
    )
    watch(
      () => type.value,
      val => {
        // console.log(val)
        nextTick(() => {
          val === 1 ? getBoxHeight() : ''
        })
      },
    )
    onMounted(async () => {
      await getDataList()
      getBoxHeight()
      window.addEventListener('resize', () => {
        type.value === 1 ? getBoxHeight() : ''
      })
    })
    return {
      ...toRefs(state),
      onSearch,
      // onCheckAllChange,
      changetype,
      type,
      value,
      getDataList,
      handledelete,
      checkboxValue,
      dataList,
      toDetail,
      deleteitem,
      fare,
      handleOk,
      showModal,
      copyUrl,
      fareurl,
      visible,
      showCheckbox,
      groupchange,
      editTitle,
      titleEditor,
      titleChange,
      height,
      getBoxHeight,
      copyState,
      searchValue,
      sousuo,
      sousuoFn,
      copyed,
      closeFn,
      npmeInp,
      textFocus,
      morevisible,
      show,
      mainStore,
      checkAlls,
      handleCheckAllChange,
      checkboxChange,
      focusTitle
      // onCopyFile
    }
  },
})
</script>
<!-- 样式!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<style lang="scss" scoped>
// 无数据时样式
.none {
  background: #fff;
  border-radius: 30px;
  height: calc(100% - 288px);
  padding: 30px 0;
  margin: 0 20px 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #7a8bbf;
}

// 有数据时样式
.contentlist {
  background: #fff;
  border-radius: 30px;
  height: calc(100% - 288px);
  padding: 30px 0;
  margin: 0 20px 20px 0;

  .top {
    padding: 0 35px;
    // .left{

    // }
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .right {
      display: flex;
      justify-content: flex-end;

      .sousuoxin {
        display: flex;
        // margin-right: 12px;
        align-items: center;
        position: relative;

        .ant-input {
          width: 0;
          height: 42px;
          border: none;
          margin-right: -42px;
          z-index: 3;
          border-radius: 21px;
          transition: all 0.5s ease-in-out;
        }

        .searchclass {
          width: 42px;
          height: 42px;
          background: #fff;
          border-radius: 21px;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 5;

          &:hover {
            box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);
            border: 1px solid rgba(243, 243, 255, 1);
            color: #686ce8;
          }
        }

        .inpxin {
          width: 200px;
          height: 42px;
          padding: 0 42px 0 10px;
          box-shadow: 0 0 30px 0 rgba(104, 108, 232, 0.1);
        }
      }

      .list_chart {
        width: 42px;
        height: 42px;
        margin-left: 5px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          border: 1px solid rgba(243, 243, 255, 1);
          box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);
          color: #686ce8;
        }
      }
    }
  }

  // 未找到内容
  .inpnone {
    width: 100%;
    height: calc(100% - 42px);
    display: flex;
    align-items: center;
    justify-content: center;

    .text {
      width: 144px;
      height: 18px;
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #7a8bbf;
      letter-spacing: 0;
      line-height: 18px;
      font-weight: 400;
    }
  }
}
</style>
<style lang="scss">
h2 {
  padding: 10px 0;
  font-size: 18px;
}
</style>
<!-- 旧代码!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->

<style lang='scss' scoped>
.check-icon {
  color: #ffba00;
  // background: #fff;
  // border-radius: 5px;
}

.deleteAllFunction {
  .selectAll {
    width: 86px;
    height: 42px;
    background: #fff;
    border: 1px solid rgba(230, 229, 255, 1);
    border-radius: 10px;
  }

  button {
    float: left;
  }

  .delete {
    margin-left: 20px;
    float: left;
    margin-right: 30px;
    background: #fff;
    height: 42px;
    line-height: 42px;
    box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
    display: flex;
    padding-right: 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #ff6370;

    dd {
      background: #fff1f2;
      border-radius: 8px;
      width: 42px;
      height: 42px;
      text-align: center;
      margin-right: 10px;
    }
  }
}

.batchDelete {
  width: 86px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(230, 229, 255, 1);
  border-radius: 10px;
  cursor: pointer;

  &:hover {
    color: $textH2Color;
  }
}

.cancelDeletion {
  width: 86px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(230, 229, 255, 1);
  border-radius: 10px;
  cursor: pointer;
  margin-right: 20px;

  &:hover {
    color: $textH2Color;
  }
}

.tips {

  // background: rgb(231, 74, 74);
  li {
    padding: 0 !important;
    height: 40px !important;
    // line-height: 32px;
    cursor: pointer;

    &:hover {
      color: $textH2Color;
      box-shadow: none !important;
    }
  }
}
</style>
